<template>
  <div class="main-box">
    <div class="table-box">
      <el-table
        :data="list"
        empty-text="暂无内容"
        row-class-name="row"
        cell-class-name="column"
        header-row-class-name="row"
        header-cell-class-name="column"
        style="width: 100%; background-color: transparent">
        <el-table-column show-overflow-tooltip prop="ip" label="访客ip" />
        <el-table-column show-overflow-tooltip prop="ip_address" label="访客地址" />
        <el-table-column show-overflow-tooltip prop="lon" label="经度" />
        <el-table-column show-overflow-tooltip prop="lat" label="纬度" />
        <el-table-column show-overflow-tooltip prop="create_time" label="访问时间">
          <template #default="scope">
            <span>{{ dayjs(scope.row.create_time).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-box df jc-c">
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        :hide-on-single-page="true"
        @change="pageChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { dayjs } from 'element-plus';
  import { getAccessList } from '@/apis/ip';
  import type { IIp, IPagination } from '@/apis/type';
  const list: Ref<Array<IIp>> = ref([]);
  const total = ref(0);
  // 请求访客列表数据
  const pagination: IPagination = {
    page: 1,
    pageSize: 10
  };
  const getAccessListFun = async () => {
    const res = await getAccessList(pagination);
    list.value = res.data.rows;
    total.value = res.data.count;
  };
  getAccessListFun();
  const pageChange = (currentPage: number, pageSize: number) => {
    pagination.page = currentPage;
    pagination.pageSize = pageSize;
    getAccessListFun();
  };
</script>

<style lang="scss" scoped>
  .table-box {
    margin-bottom: 20px;
  }
  .title {
    color: red;
  }
  /* 重置table主题色 */
  ::v-deep(.row),
  ::v-deep(.column) {
    background-color: var(--bg-color) !important;
    color: var(--text-color);
    border-bottom: #fff !important;
  }
  ::v-deep(.row:hover) {
    background-color: var(--bg-color-reverse) !important;
    border-bottom: #fff !important;
    color: var(--text-color);
  }
  ::v-deep(.el-table__inner-wrapper)::before {
    /* 去除下边框 */
    height: 0;
  }
</style>
